
<template>

  <div >

    <el-card >
      <div class="flex flex-wrap gap-4">
        <el-radio-group v-model="getListParme.checkstatus" @change="changetitle">
<!--          <el-radio-button value="" label="全部"></el-radio-button>-->
          <el-radio-button
              v-for="(option, index) in borderCardOptions"
              :key="index"
              :value="option.value"
          >
            {{option.name}}({{option.count}})
          </el-radio-button>
          <!--        <el-radio-button value="全部" label="全部"></el-radio-button>-->
          <!--        <el-radio-button value="学校通过" label="学校通过"></el-radio-button>-->
          <!--        <el-radio-button value="学校退回" label="学校退回"></el-radio-button>-->
          <!--        <el-radio-button value="待审核" label="待审核"></el-radio-button>-->
        </el-radio-group>
      </div>
      <div>
        <div class="flex-input">
          <div>
            <el-input  v-model="getListParme.projectName"   placeholder="项目名称" />
          </div>
          <div>
            <el-input v-model="getListParme.chargerName"  placeholder="负责人" />
          </div>
          <div>
            <el-select
                v-model="getListParme.projectType"
                multiple
                collapse-tags
                filterable
                collapse-tags-tooltip
                placeholder="项目分类"
                @focus="getxiangmufenleiOptions"
            >
              <el-option
                  v-for="item in xiangmufenleiOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
              />
            </el-select>
          </div>
          <div style="min-width: 266px">
            <el-button icon="ArrowLeft"  @click="searchOpen = !searchOpen">更多</el-button>
            <el-button type="primary" icon="Search" @click="confirmClick">查询</el-button>
            <el-button  icon="Search" @click="reset">重置</el-button>
          </div>
        </div>


        <div class="flex-input" v-show="searchOpen">
          <div>
            <el-select
                v-model="getListParme.unitld"
                multiple
                collapse-tags
                filterable
                collapse-tags-tooltip
                placeholder="所属单位"
                @focus="getsuoshudanweiOptions"
            >
              <el-option
                  v-for="item in suoshudanweiOptions"
                  :key="item.codeColumn"
                  :label="item.valueColumn"
                  :value="item.codeColumn"
              />
            </el-select>
          </div>
          <div class="data-flex">
            <div  class="date-picker-wrapper">
              <el-date-picker
                  v-model="valueDate"
                  :type="year"
                  style="width: 100%;"
                  range-separator="至"
                  start-placeholder="变更时间开始时间"
                  end-placeholder="变更时间结束时间"

              />
            </div>
            <div  class="select-wrapper">
              <!--          <el-radio-group v-model="year" aria-label="size control">-->
              <!--            <el-radio-button value="daterange">年/月/日</el-radio-button>-->
              <!--            <el-radio-button value="monthrange">月</el-radio-button>-->
              <!--            <el-radio-button value="yearrange">年</el-radio-button>-->
              <!--          </el-radio-group>-->
              <div class="data-selete">
                <el-select
                    v-model="year"
                    placeholder="请选择"
                    style="width: 100%;"
                    @change="valueDate=[]"
                >
                  <el-option
                      v-for="item in optionsdata"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>

              </div>
            </div>
          </div>
          <div class="data-flex">
            <div  class="date-picker-wrapper">
              <el-date-picker
                  v-model="valueDateTwo"
                  :type="yearTwo"
                  style="width: 220px;"
                  range-separator="至"
                  start-placeholder="立项日期开始时间"
                  end-placeholder="立项日期结束时间"

              />
            </div>
            <div  class="select-wrapper">
              <!--          <el-radio-group v-model="year" aria-label="size control">-->
              <!--            <el-radio-button value="daterange">年/月/日</el-radio-button>-->
              <!--            <el-radio-button value="monthrange">月</el-radio-button>-->
              <!--            <el-radio-button value="yearrange">年</el-radio-button>-->
              <!--          </el-radio-group>-->
              <div class="data-selete">
                <el-select
                    v-model="yearTwo"
                    placeholder="请选择"
                    style="width: 80px"
                    @change="valueDateTwo=[]"
                >
                  <el-option
                      v-for="item in optionsdataTwo"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>

              </div>
            </div>
          </div>
          <div>
            <el-select
                v-model="getListParme.Status"
                multiple
                collapse-tags
                filterable
                collapse-tags-tooltip
                placeholder="审核状态"
                @focus="getshenhezhuangtaiOptions"
            >
              <el-option
                  v-for="item in shenhezhuangtaiOptions"
                  :key="item.codeColumn"
                  :label="item.valueColumn"
                  :value="item.codeColumn"
              />
            </el-select>
          </div>
          <div class="aaaaa">
            <el-input
                v-model="getListParme.params.minfee"
                style="width: 220px"
                placeholder="最小批准经费"
            />
            <span class="zhi">至</span>
            <el-input
                v-model="getListParme.params.maxfee"
                style="width: 220px"
                placeholder="最大批准经费"
            />
          </div>

        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 10px">
      <jfdzTable ref="childGetList" v-model="getListParme" @GetTitleCard="GetTitleCard"></jfdzTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import jfdzTable from '@/views/money/jfdz/jfdzTable.vue'
import {getCategory,listtotal} from '../../../api/money/jfdzApi'
import {ref, computed, onBeforeMount} from "vue";

//重置
const reset = () => {
  for (const key in getListParme.value) {
    if (typeof getListParme.value[key] === 'object' && getListParme.value[key]!== null) {
      // 处理嵌套对象
      for (const subKey in getListParme.value[key]) {
        getListParme.value[key][subKey] = '';
      }
    } else {
      getListParme.value[key] = '';
    }
    // 单独处理 unitld projectType Status，将其置为空数组
    if (key === 'unitld') {
      getListParme.value[key] = [];
    }else if(key==='Status'){
      getListParme.value[key] = [];
    }else if(key === 'projectType'){
      getListParme.value[key] = [];
    }
  }
  // 清空 valueDate
  valueDate.value = [];
  valueDateTwo.value = [];
}

const childGetList = ref(null)
// 在组件中添加此方法
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
//查询
const confirmClick =function () {
  if (valueDate.value && valueDate.value.length === 2) {
    // 根据选择类型处理日期范围
    if (year.value === 'yearrange') {
      // 按年选择：设置为当年的1月1日至12月31日
      const startYear = valueDate.value[0].getFullYear();
      const endYear = valueDate.value[1].getFullYear();

      // 创建日期对象
      const startDate = new Date(startYear, 0, 1); // 1月1日
      const endDate = new Date(endYear, 11, 31);  // 12月31日

      // 更新值和参数
      valueDate.value = [startDate, endDate];
      getListParme.value.params.beginTime = formatDate(startDate);
      getListParme.value.params.endTime = formatDate(endDate);
    } else if (year.value === 'monthrange') {
      // 按月选择：设置为当月的第一天至最后一天
      const startMonth = valueDate.value[0];
      const endMonth = valueDate.value[1];

      // 创建当月第一天和最后一天
      const startDate = new Date(startMonth.getFullYear(), startMonth.getMonth(), 1);
      const endDate = new Date(endMonth.getFullYear(), endMonth.getMonth() + 1, 0);

      // 更新值和参数
      valueDate.value = [startDate, endDate];
      getListParme.value.params.beginTime = formatDate(startDate);
      getListParme.value.params.endTime = formatDate(endDate);
    } else {
      // 按日选择：直接使用选择的值
      getListParme.value.params.beginTime = formatDate(valueDate.value[0]);
      getListParme.value.params.endTime = formatDate(valueDate.value[1]);
    }
  } else {
    // 未选择日期
    console.log(valueDate.value);
    getListParme.value.params.beginTime = '';
    getListParme.value.params.endTime = '';
  }

  if (valueDateTwo.value && valueDateTwo.value.length === 2) {
    // 根据选择类型处理日期范围
    if (yearTwo.value === 'yearrange') {
      // 按年选择：设置为当年的1月1日至12月31日
      const startYear = valueDateTwo.value[0].getFullYear();
      const endYear = valueDateTwo.value[1].getFullYear();

      // 创建日期对象
      const startDate = new Date(startYear, 0, 1); // 1月1日
      const endDate = new Date(endYear, 11, 31);  // 12月31日

      // 更新值和参数（使用formatDate函数确保格式正确）
      valueDateTwo.value = [startDate, endDate];
      getListParme.value.params.beginDate = formatDate(startDate);
      getListParme.value.params.endDate = formatDate(endDate);
    } else if (yearTwo.value === 'monthrange') {
      // 按月选择：设置为当月的第一天至最后一天
      const startMonth = valueDateTwo.value[0];
      const endMonth = valueDateTwo.value[1];

      // 创建当月第一天和最后一天
      const startDate = new Date(startMonth.getFullYear(), startMonth.getMonth(), 1);
      const endDate = new Date(endMonth.getFullYear(), endMonth.getMonth() + 1, 0);

      // 更新值和参数
      valueDateTwo.value = [startDate, endDate];
      getListParme.value.params.beginDate = formatDate(startDate);
      getListParme.value.params.endDate = formatDate(endDate);
    } else {
      // 按日选择：直接使用选择的值
      getListParme.value.params.beginDate = formatDate(valueDateTwo.value[0]);
      getListParme.value.params.endDate = formatDate(valueDateTwo.value[1]);
    }
  } else {
    // 未选择日期
    console.log(valueDateTwo.value);
    getListParme.value.params.beginDate = '';
    getListParme.value.params.endDate = '';
  }
  childGetList.value.getslist()
}

const searchOpen = ref(false)
const changetitle = () => {
  childGetList.value.getslist()
}

//审核状态
const shenhezhuangtaiOptions = ref([])
const getshenhezhuangtaiOptions = function (){
  getCategory({
    'bizName':'审核状态'
  })
      .then((res)=>{
        shenhezhuangtaiOptions.value = res.data
      })
}
//项目分类
const xiangmufenleiOptions = ref([])
const getxiangmufenleiOptions = function (){
  getCategory({
    'bizName':'项目分类（所有-有级联）'
  })
      .then((res)=>{
        xiangmufenleiOptions.value = res.data
      })
}

//所属单位
const suoshudanweiOptions = ref([])
const getsuoshudanweiOptions = function (){
  getCategory({
    'bizName':'成果归属单位'
  })
      .then((res)=>{
        suoshudanweiOptions.value = res.data
      })
}

//头部选项卡
const borderCardOptions = ref([])
const GetTitleCard = () => {
  listtotal(
      getListParme.value
  )
      .then((res)=>{
        borderCardOptions.value =res.data
      })

}

onBeforeMount(()=>{
  // console.log(getListParme.value)
  // if (valueDate.value && valueDate.value.length === 2) {
  //   // 将选择的年份范围设置为1月1号
  //   valueDate.value = [
  //     new Date(valueDate.value[0].getFullYear(), 0, 1),
  //     new Date(valueDate.value[1].getFullYear(), 0, 1)
  //   ];
  //   getListParme.value.params.beginTime = valueDate.value[0]
  //   getListParme.value.params.endTime = valueDate.value[1]
  // }
  // console.log(getListParme.value)
  // if (valueDateTwo.value && valueDateTwo.value.length === 2&&yearTwo.value==='yearrange') {
  //   // 将选择的年份范围设置为1月1号
  //   valueDateTwo.value = [
  //     new Date(valueDateTwo.value[0].getFullYear(), 0, 1),
  //     new Date(valueDateTwo.value[1].getFullYear(), 0, 1)
  //   ];
  //   getListParme.value.params.beginDate = valueDateTwo.value[0]
  //   getListParme.value.params.endDate = valueDateTwo.value[1]
  // }else {
  //   getListParme.value.params.beginDate = valueDateTwo.value[0]
  //   getListParme.value.params.endDate = valueDateTwo.value[1]
  // }
  listtotal(
      getListParme.value
  )
      .then((res)=>{
        borderCardOptions.value =res.data
      })

})
//时间区间选择
const optionsdata = [
  {
    value: 'daterange',
    label: '年/月/日',
  },
  {
    value: 'monthrange',
    label: '月',
  },
  {
    value: 'yearrange',
    label: '年',
  },

]

const year = ref<'daterange' | 'monthrange' | 'yearrange'>('daterange')

const valueDate = ref([])
//时间区间选择end
//立项日期时间区间选择
const optionsdataTwo = [
  {
    value: 'daterange',
    label: '年/月/日',
  },
  {
    value: 'monthrange',
    label: '月',
  },
  {
    value: 'yearrange',
    label: '年',
  },

]

const yearTwo = ref<'daterange' | 'monthrange' | 'yearrange'>('daterange')

const valueDateTwo = ref([])
//时间区间选择end
const getListParme = ref({
  projectId:'',//项目id
  projectName:'',//项目名称
  checkstatus:'', //全部‘’ 头部选项卡 审核状态
  chargerName:'', //负责人
  Status:[],//审核状态
  projectType:[],//项目分类
  unitld:[],//所属单位
  orderByColumn:"b.alterdate",
  isAsc:"descending",
  params:{
    beginTime:'',//变更时间开始时间
    endTime:'',//变更时间结束时间
    beginDate:'',//立项日期开始
    endDate:'',//立项日期结束
    minfee:'',//最小批准经费
    maxfee:'',//最大批准经费
  },

})



</script>
<style scoped lang="scss">
.title-flex{
  display: flex;
  justify-content: space-between;
  text-align: center;

}
//弹窗的样式
.dialog-footer {
   display: flex;
   justify-content: center;
   gap: 10px;
 }
/* 设置标题宽度 */
:deep(.el-descriptions__label) {
  width: 200px;
}
/* 让内容居中显示 */
:deep(.el-descriptions__content) {
  text-align: center;
}
.dialog-one-title{
  height: 30px;
  width: 100%;
  font-size: 16px;
  font-weight: bolder;
  border-bottom: 2px solid #ffce55;
}
.dialog-box > div{
  margin: 10px 0;
}
.title-col{
  color: #337AB7;
  font-weight: bolder;
}
.flex-input{
  display: flex;
  flex-wrap: wrap;
  min-width: 1100px;
}
.flex-input>div{
  width: 24%;
  margin: 10px 10px 0 0;
}
//.data-flex{
//  display: flex;
//  margin: 0 10px 0 0;
//  div:first-child{
//    margin-right: 10px;
//  }
//}
.data-flex {
  display: flex;
  gap: 10px; /* 元素之间的间距 */

}

.date-picker-wrapper {
  flex: 1; /* 占据剩余空间 */
}

.select-wrapper {
  width: 80px; /* 选择器的固定宽度 */
  min-width: 80px; /* 最小宽度 */
}
.aaaaa{
 flex: 2;
}
</style>